<script>
import {defineComponent} from 'vue'
import $ from 'jquery'

export default defineComponent({
  name: "Documents",
  data() {
    return {
      currentTableKey: null,
      block: [
        {
          title: '已购在线课程',
          content: '5',
          isOpen: false,
          tableDataKey: 'course',
        },
        {
          title: '已购名师直播',
          content: '5',
          isOpen: false,
          tableDataKey: 'live',
        },
        {
          title: '考证 (次)',
          content: '5',
          isOpen: false,
          tableDataKey: 'exam',
        },
        {
          title: '培训（次）',
          content: '5',
          isOpen: false,
          tableDataKey: 'training',
        },
        {
          title: '题库练习（次）',
          content: '5',
          isOpen: false,
          tableDataKey: 'question',
        },
        {
          title: '模拟考试（次）',
          content: '5',
          isOpen: false,
          tableDataKey: 'mockExam',
        },
      ],
      tableData:{
        course:[
          {
            title: '已购在线课程',
            name: '课程名称',
            teacher: 'xx',
            level: '4100105-养老护理员-四级',
            buy_time: '2025-06-12 00:00:00',
            effective_time: '2025-12-12',
            progress: '80%，已学10/12节'
          }
        ],
        live:[
          {
            title: '已购名师直播',
            name: '直播课',
            teacher: 'xx',
            level: '4100105-养老护理员-四级',
            buy_time: '2025-06-12 00:00:00',
            live_time: '2025-06-12 00:00'
          }
        ],
        exam:[
          {
            title: '考证',
            name: 'XXXXXXXXXXXXXXX05期',
            level: '4100105-养老护理员-四级',
            exam_time: '2025-06-12 00:00',
            regis_time: '2025-06-12 00:00:00',
            training: '是',
            score: '通过，理论80分，实践80分'
          }
        ],
        training:[
          {
            title: '培训',
            name: 'XXXXXXXXXXXXXXX05期',
            theme: '4100105-养老护理员-四级',
            time: '2025-06-12 至2025-06-20'
          }
        ],
        question:[
          {
            title: '题库练习',
            time: '2025-06-12 00:00:00',
            name: '题库',
            use_time: '2小时'
          }
        ],
        mockExam:[
          {
            title: '模拟考试',
            time: '2025-06-12 00:00:00',
            use_time:'2小时',
            score: '通过，理论80分，实践80分'
          }
        ]
      }
    }
  },
  methods: {
    toggleBlock(index) {
      this.block = this.block.map((item, i) => ({
        ...item,
        isOpen: i === index ? !item.isOpen : false // 仅打开当前项
      }));
      $('header').css('margin-bottom','30px')
      this.currentTableKey = this.block[index].isOpen ? this.block[index].tableDataKey : null;
    }
  },
  computed: {
    getTableData(){
      if (!this.currentTableKey) return [];
      return this.tableData[this.currentTableKey] || [];
    }
  }
})
</script>

<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/talents/index'}">人才信息</el-breadcrumb-item>
    <el-breadcrumb-item>考证学习情况</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="body">
    <header>
      <div>
          <el-text class="name">{{ '姓名' }}</el-text>
          <br>
          <el-text style="font-size: 13px">{{ '性别' }}|{{ '几几年' }}|{{ '学历' }}|{{ '经验' }}</el-text>
        <div class="block-container">
          <div v-for="(item, index) in block" :key="index" class="block-wrapper">
            <div
              class="block-box"
              :class="{active: item.isOpen}"
              @click="toggleBlock(index)"
            >
              <el-text class="title">{{ item.title }}</el-text>
              <el-text class="content">{{ item.content }}</el-text>
            </div>

            <!-- 图标放在 block-box 外面 -->
            <i v-if="item.isOpen" class="el-icon-caret-bottom icon-bottom"></i>
          </div>
        </div>
      </div>
    </header>
    <hr>
    <article>
      <section>
        <div class="box">
          <div class="table_title" v-if="currentTableKey">
            <div v-if="currentTableKey == 'course'">{{ tableData.course[0].title }}</div>
            <div v-if="currentTableKey == 'live'">{{ tableData.live[0].title }}</div>
            <div v-if="currentTableKey == 'exam'">{{ tableData.exam[0].title }}</div>
            <div v-if="currentTableKey == 'training'">{{ tableData.training[0].title }}</div>
            <div v-if="currentTableKey == 'question'">{{ tableData.question[0].title }}</div>
            <div v-if="currentTableKey == 'mockExam'">{{ tableData.mockExam[0].title }}</div>
          </div>
          <el-table :data="getTableData" border v-if="currentTableKey">
            <el-table-column label="课程名称" prop="name" v-if="currentTableKey == 'course'"/>
            <el-table-column label="讲师" prop="teacher" v-if="currentTableKey == 'course'"/>
            <el-table-column label="专业等级" prop="level" v-if="currentTableKey == 'course'"/>
            <el-table-column label="购买时间" prop="buy_time" v-if="currentTableKey == 'course'"/>
            <el-table-column label="有效时间" prop="effective_time" v-if="currentTableKey == 'course'"/>
            <el-table-column label="学习进度" prop="progress" v-if="currentTableKey == 'course'"/>

            <el-table-column label="直播课" prop="name" v-if="currentTableKey == 'live'"/>
            <el-table-column label="讲师" prop="teacher" v-if="currentTableKey == 'live'"/>
            <el-table-column label="专业等级" prop="level" v-if="currentTableKey == 'live'"/>
            <el-table-column label="购买时间" prop="buy_time" v-if="currentTableKey == 'live'"/>
            <el-table-column label="开播时间" prop="live_time" v-if="currentTableKey == 'live'"/>

            <el-table-column label="考证名称" prop="name" v-if="currentTableKey == 'exam'"/>
            <el-table-column label="专业等级" prop="level" v-if="currentTableKey == 'exam'"/>
            <el-table-column label="考试时间" prop="exam_time" v-if="currentTableKey == 'exam'"/>
            <el-table-column label="报名时间" prop="regis_time" v-if="currentTableKey == 'exam'"/>
            <el-table-column label="参加培训" prop="training" v-if="currentTableKey == 'exam'"/>
            <el-table-column label="成绩" prop="score" v-if="currentTableKey == 'exam'"/>

            <el-table-column label="培训名称" prop="name" v-if="currentTableKey == 'training'"/>
            <el-table-column label="培训主题" prop="theme" v-if="currentTableKey == 'training'"/>
            <el-table-column label="培训时间" prop="time" v-if="currentTableKey == 'training'"/>

            <el-table-column label="时间" prop="time" v-if="currentTableKey == 'question'"/>
            <el-table-column label="题库名称" prop="name" v-if="currentTableKey == 'question'"/>
            <el-table-column label="用时" prop="use_time" v-if="currentTableKey == 'question'"/>

            <el-table-column label="时间" prop="time" v-if="currentTableKey == 'mockExam'"/>
            <el-table-column label="用时" prop="use_time" v-if="currentTableKey == 'mockExam'"/>
            <el-table-column label="成绩" prop="score" v-if="currentTableKey == 'mockExam'"/>
          </el-table>
        </div>
      </section>
    </article>
  </div>
</div>
</template>

<style scoped>
.body{
  width: 100%;
  height: 100%;
}

header{
  width: 100%;
  margin-top: 2%;
  margin-left: 2%;

  .name{
    font-size: 20px;
  }
}

.block-container {
  display: flex;
  gap: 30px; /* 设置 block-box 之间的间距 */
  flex-wrap: wrap; /* 可选：允许换行 */
  margin-top: 2%;
}

.block-box {
  position: relative; /* 必须设置为相对定位 */
  cursor: pointer;
  display: grid;
  width: 150px; /* 或 auto、固定宽度等 */
  height: 120px;
  border: 1px solid #ccc;
  text-align: center;
  border-radius: 10px;
  .title{
    margin-top: 20px;
    margin-bottom: -10%;
  }
  .content{
    font-size: 25px;
  }
}

.block-wrapper {
  position: relative;
  display: inline-block; /* 防止 flex 布局影响定位 */
}

.icon-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  bottom: -10px; /* 距离 block-box 的距离 */
  font-size: 16px;
  color: #409EFF;
  z-index: 10;
}

.el-icon-caret-bottom.icon-bottom {
  font-size: 80px !important;
}

.block-box.active {
  border-color: blue !important;
}

.table_title{
  font-size: 20px;
  margin-top: 1%;
  margin-left: 1%;
  margin-bottom: 1%;
}
</style>
